<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org";xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>新闻资讯</title>
    <link th:href="@{/css/bootstrap.min.css?v=3.3.7}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css?v=4.7.3}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/css/index/index.css}">
    <!--导入layui-->
    <link rel="stylesheet" th:href="@{/ajax/libs/layui-v2.6.8/layui/css/layui.css}">
    <style>
        /*清楚浮动.用在浮动的父元素*/
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
        /*显示不全用...表示*/
        .ellipsis {
            width: 550px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
        }
        .ellipsis-small {
            width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
        }
        .ellipsis-2{
            display: -webkit-box;
            overflow: hidden;
            white-space: normal !important;
            text-overflow: ellipsis;
            word-wrap: break-word;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical
        }
        .net-ease-box li:hover{
            background-color: #f5f5f5;
        }
        .net-ease-box li{
            padding: 10px 15px;
        }

        .net-ease-internationality-box li:hover{
            background-color: #f5f5f5;
        }
        .net-ease-internationality-box li{
            padding: 10px 15px;
        }

        /*加载中动画*/
        .loaderbox {
            display: none;
            width: 100%;
            text-align: center;
            padding: 10px;
            margin: 5px auto;
            color: #000 !important;
            font-size: 13px;
            font-weight: 400;
            vertical-align: middle;
        }
        .loaderbox .loading-activity {
            position: absolute;
            left: 30%;
            width: 18px;
            height: 18px;
            border: solid 2px transparent;
            border-top-color: #000;
            border-left-color: #000;
            border-radius: 10px;
            -webkit-animation: pace-spinner 400ms linear infinite;
            -moz-animation: pace-spinner 400ms linear infinite;
            -ms-animation: pace-spinner 400ms linear infinite;
            -o-animation: pace-spinner 400ms linear infinite;
            animation: pace-spinner 400ms linear infinite;
        }
        @media (max-width: 767px) {
            .loading-activity {
                width: 18px;
                height: 18px;
            }
        }

        @-ms-keyframes pace-spinner {
            0% {
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes pace-spinner {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
        /*转圈动画结束*/
    </style>
</head>
<body>

<!--导航栏-->
<nav  class="navbar navbar-default navbar-fixed-top my-navbar">
    <div class="container">
        <!--页面导航-->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" th:href="@{/index}" style=" color: #F8AA00;font-weight: 600">TaskSupervision</a>
            <!--<a class="navbar-brand" th:href="@{/index}"><img th:src="@{/img/index/images/logo.png}" alt="logo"></a>-->
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!--导航-->
            <ul class="nav navbar-nav my-navbar-nav">
                <li ><a th:href="@{/index}">主页<span class="sr-only">(current)</span></a></li>
                <!--				<li><a href="#">42区</a></li>-->
                <!--				<li><a href="#">段子</a></li>-->
                <!--				<li><a href="#">图片</a></li>-->
                <li class="active"><a href="/news" target="_blank">新闻资讯</a></li>
                <li th:if="${selfUser!=null}"><a href="javascript:;" onclick="articleManage()">帖子管理</a></li>

                <li th:if="${selfUser!=null}"><a href="javascript:;" onclick="taskManage()">任务管理</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right user-center" th:if="${selfUser!=null}">
                <li class="dropdown user-menu">
                    <a href="javascript:void(0)" class="dropdown-toggle" data-hover="dropdown">
                        <img th:src="(${#strings.isEmpty(selfUser.avatar)}) ? @{/img/river.png} : @{${selfUser.avatar}}" th:onerror="this.src='/img/river.png'" class="user-image">
                        <span class="hidden-xs">[[${#strings.defaultString(selfUser.userName, '-')}]]</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="mt5">
                            <a th:href="${'/system/user/home/'+selfUser.userId}" target="_blank" class="menuItem noactive">
                                <i class="fa fa-home" ></i> 我的主页</a>
                        </li>
                        <li>
                            <a onclick="userInfo()" target="_blank">
                                <i class="fa fa-user"></i> 个人信息</a>
                        </li>
                        <li>
                            <a onclick="resetPwd()" target="_blank">
                                <i class="fa fa-key"></i> 修改密码</a>
                        </li>
                        <li>
                            <a th:href="@{/admin/index}"  target="_blank" shiro:hasRole="admin">
                                <i class="fa fa-tv"></i> 后台管理</a>
                        </li>
                        <li style="border-top: 1px solid #EEEEEE">
                            <a th:href="@{/logout}">
                                <i class="fa fa-sign-out"></i> 退出登录</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right my-form create-task" th:if="${selfUser!=null}">
                <li>
                    <a href="javascript:createTask();"><i class="glyphicon glyphicon-leaf" style="color: wheat;"></i> <span class="bold" style="color: white;font-weight: 600">新建任务</span></a>
                </li>
            </ul>
            <!--搜索框-->
            <form class="navbar-form navbar-right my-form">
                <div class="form-group">
                    <input type="text" class="form-control" id="search-key"  placeholder="Search">
                </div>
                <a class="my-img" href="javascript:;" onclick="searchIndex()"></a>
                <div id="search-list-box" style="width: 100%;background-color: rgba(255,255,255,0.9);position: absolute;margin-top: 8px;border-radius: 2px;overflow: auto;height: 220px;display: none;z-index: 99999">
                    <ul id="search-list">

                    </ul>
                </div>
                <!--遮罩层-->
                <div id="zzc" onclick="hideSearchBox()"></div>
                <style>
                    #zzc{
                        display: none;
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 9999;
                    }
                    #search-list a :hover{
                        background-color: #01AAED;
                    }
                    #search-list a li:hover {
                        color: white;
                    }
                </style>
            </form>
            <!--注册登录-->
            <ul class="nav navbar-nav navbar-right my-navbar-nav" th:if="${selfUser==null}">
                <li><a style="color: white;" href="/register">注册</a></li>
                <li><a style="color: white;" href="/login">登录</a></li>
            </ul>
            <script th:inline="javascript">
                //新建任务页面
                function createTask() {
                    var url = '/taskcenter/taskcenter/addIndex';
                    top.layer.open({
                        type : 2,
                        title : '新建任务',
                        anim : 2,
                        area : [ '90%', '90%' ],
                        maxmin : true,
                        shadeClose: true,
                        content : url
                    })
                }
                // 修改密码
                function resetPwd() {
                    var url = '/system/user/profile/resetPwd';
                    $.modal.open("重置密码", url, '770', '380');
                }
                //个人信息
                function userInfo() {
                    var url = '/system/user/profile';
                    $.modal.open("个人信息", url, '970', '500');
                }
                /*任务管理*/
                function taskManage() {
                    var url = '/taskcenter/taskcenter/index';
                    top.layer.open({
                        type : 2,
                        title : '任务管理',
                        anim : 2,
                        area : [ '90%', '90%' ],
                        maxmin : true,
                        shadeClose: true,
                        content : url
                    })
                    // $.modal.open("任务管理", url, '970', '500');
                }
                /*帖子管理*/
                function articleManage() {
                    var url = '/system/article/index';
                    top.layer.open({
                        type : 2,
                        title : '帖子管理',
                        anim : 2,
                        area : [ '90%', '90%' ],
                        maxmin : true,
                        shadeClose: true,
                        content : url
                    })
                    // $.modal.open("帖子管理", url, '970', '500');
                }
                function hideSearchBox() {
                    $('#search-list-box').hide()
                    $('#zzc').hide()
                }
                function searchIndex() {
                    var key = $('#search-key').val();
                    $('#search-list-box').show()
                    $('#zzc').show()
                    var url= "/search/"+key
                    var config = {
                        url: url,
                        type: "get",
                        dataType: "json",
                        beforeSend: function () {
                        },
                        success: function(result) {
                            if (result.code=="0") {
                                $('#search-list').html("")
                                for (let article of result.data) {
                                    var li = '<a href="/system/article/detail/'+article.id+'" target="_blank" style="min-width: 100px;text-decoration:none;"><li style="padding: 10px 20px;">'+article.articleTitle+'</li></a>';
                                    $('#search-list').append(li)
                                }
                                if (result.data.length==0){
                                    var li = '<li style="padding: 10px 20px;">没有搜到，换一个试试!</li>';
                                    $('#search-list').append(li)
                                }
                            } else {
                                var li = '<li style="padding: 10px 20px;">出错啦，请稍后再试！</li>';
                                $('#search-list').append(li)
                            }
                        }
                    }
                    $.ajax(config)
                }
            </script>
        </div>
    </div>
</nav>
<div class="layui-container">
    <br>
    <br>
    <br>
    <br>
    <div class="layui-row layui-col-space30">
       <div class="layui-col-md8" >
           <div class="layui-card" >
               <div class="layui-card-header" style="font-weight: 600">头条新闻</div>
               <div class="layui-card-body" style="padding: 0">
                   <ul class="net-ease-box">
                       <div class="loaderbox" id="index-news"><div class="loading-activity"></div>加载中，请稍候...</div>

                   </ul>
               </div>
           </div>
       </div>
        <div class="layui-col-md4">
            <div class="layui-card" >
                <div class="layui-card-header" style="font-weight: 600">精选新闻</div>
                <div class="layui-card-body" style="padding: 0">
                    <ul class="net-ease-internationality-box">
                        <div class="loaderbox" id="internationality-news"><div class="loading-activity"></div>加载中，请稍候...</div>

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="include :: footer-nav-index"></div>

<!--回到顶部图标-->
<div class="move-top" title="回到顶部"></div>


<th:block th:include="include :: footer-index" />
<script th:src="@{/js/index/index.js}"></script>
<script th:inline="javascript">
    $(function () {
        //头条新闻
        var util = layui.util;
        var url= "/netEaseNews/index";
        var config = {
            url: url,
            type: "get",
            dataType: "json",
            beforeSend: function () {
                $('#index-news').show()
            },
            success: function(result) {
                var T1348647853363 = result.data
                var object = JSON.parse(T1348647853363)
                var news = object.T1348647853363
                for (const newsCont of news) {
                    var img = '<div style="float: left;margin-right: 10px;height: 120px;overflow: hidden;">\n' +
                        '          <img src="'+newsCont.imgsrc+'" alt="" style="width: 120px;">\n' +
                        '      </div>'
                    if (newsCont.imgsrc==''){
                        img="";
                    }
                    var url = ""
                    //url为空
                    if (newsCont.url==''){
                        url='<a href="#"   class="clearfix urlError" >'

                    } else if (newsCont.url==null){
                        url='<a href="#"   class="clearfix urlError" >'
                    }
                    else {
                        url = '<a href="'+newsCont.url+'" target="_blank" class="clearfix" >'
                    }
                    $('.net-ease-box').append('<li style="border-bottom: 1px  solid #eee">\n' +
                        '   '+url+'\n' +
                        '       <div>\n' +img+
                        '           <div style="float: left" >\n' +
                        '               <div class="layui-row">\n' +
                        '                   <h4 style="margin-bottom: 10px;font-size: 16px"><b class="ellipsis">'+newsCont.title+'</b></h4>\n' +
                        '                   <div style="color: #999999;margin-bottom: 5px;font-size: 14px" class="ellipsis">'+newsCont.digest+'</div>\n' +
                        '                   <div style="color: #676a6c;font-size: 12px;font-weight: 400">来自：'+newsCont.source+'</div>\n' +
                        '               </div>\n' +
                        '               <div class="layui-row" style="color: #999;font-size: 13px">\n' +
                        '                   <span>'+util.timeAgo(newsCont.ptime)+'</span> <span>&nbsp;|&nbsp;</span><span>'+newsCont.commentCount+' 评论</span>\n' +
                        '               </div>\n' +
                        '           </div>\n' +
                        '       </div>\n' +
                        '   </a>\n' +
                        '</li>')
                }

                setTimeout(function(){
                    $('#index-news').hide()
                }, 100);
            }
        }
        $.ajax(config)


        //精选新闻
        var urlForeign= "/netEaseNews/foreign";
        var configForeign = {
            url: urlForeign,
            type: "get",
            dataType: "json",
            beforeSend: function () {
                $('#internationality-news').show()
            },
            success: function(result) {
                var T1467284926140 = result.data
                var object = JSON.parse(T1467284926140)
                var news = object.T1467284926140
                for (const newsCont of news) {
                    var img = '<div style="float: left;margin-right: 10px;height: 110px;overflow: hidden;">\n' +
                        '          <img src="'+newsCont.imgsrc+'" alt="" style="width: 100px;">\n' +
                        '      </div>'
                    if (newsCont.imgsrc==''){
                        img="";
                    }
                    var url = ""
                    //url为空
                    if (newsCont.url==''){
                        url='<a href="#"   class="clearfix urlError" >'
                    } else if (newsCont.url==null){
                        url='<a href="#"  class="clearfix urlError" >'
                    }
                    else {
                        url = '<a href="'+newsCont.url+'" target="_blank" class="clearfix" >'
                    }
                    $('.net-ease-internationality-box').append('<li style="border-bottom: 1px  solid #eee">\n' +
                        '   '+url+'\n' +
                        '       <div >\n' +img+
                        '           <div style="float: left" >\n' +
                        '               <div class="layui-row">\n' +
                        '                   <h4 style="margin-bottom: 8px;font-size: 13px"><b class="ellipsis-small">'+newsCont.title+'</b></h4>\n' +
                        '                   <div style="color: #999999;margin-bottom: 5px;font-size: 12px" class="ellipsis-small">'+newsCont.digest+'</div>\n' +
                        '                   <div style="color: #676a6c;font-size: 12px;font-weight: 400">来自：'+newsCont.source+'</div>\n' +
                        '               </div>\n' +
                        '               <div class="layui-row" style="color: #999;font-size: 12px">\n' +
                        '                   <span>'+util.timeAgo(newsCont.ptime)+'</span> <span>&nbsp;|&nbsp;</span><span>'+newsCont.commentCount+' 评论</span>\n' +
                        '               </div>\n' +
                        '           </div>\n' +
                        '       </div>\n' +
                        '   </a>\n' +
                        '</li>')
                }

                setTimeout(function(){
                    $('#internationality-news').hide()
                }, 100);
            }
        }
        $.ajax(configForeign)
    })
</script>
</body>
</html>